<%--  上面的都是一些样式--%>
<%--
  Created by IntelliJ IDEA.
  User: 婷儿
  Date: 2022/6/27
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>用户展示</title>
        <link rel="stylesheet" href="../../static/layui-main/dist/css/layui.css">
        <script src="../../static/layui-main/src/layui.js"></script>
        <script src="../../static/jquery-3.5.0.min.js"></script>
    </head>
    <body>
        <%--模糊查询--%>
        <form class="layui-form" action="">
            <div class="layui-inline">
                <label class="layui-form-label">用户编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="userId" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline"><label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="search_reset">重置</button>
                </div>
            </div>
        </form>

        <table id="demo" lay-filter="test"></table>

        <%--头部工具栏--%>
        <script type="text/html" id="toolbarDemo">
            <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
            <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="delete">删除</a>
        </script>

        <%--行内工具栏--%>
        <script type="text/babel" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">重置密码</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <%--重置密码的弹框from--%>
        <form class="layui-form" action="" id="savepassForm" lay-filter="savepassFormFilter" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">用户Id</label>
                <div class="layui-input-block">
                    <input type="text" name="userId" placeholder="用户名id" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" required lay-verify="required" lay-reqtext="密码不能为空" placeholder="密码"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSaveUser">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%--修改的弹框from--%>
        <form class="layui-form" action="" id="saveUserForm" lay-filter="saveUserFormFilter" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">用户Id</label>
                <div class="layui-input-block">
                    <input type="text" name="userId" required lay-verify="required" readonly="readonly" placeholder="用户名id"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-block">
                    <select name="deptId" lay-verify="" id="xiala"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录名称</label>
                <div class="layui-input-block">
                    <input type="text" name="loginName" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" required lay-verify="required" placeholder="用户名" value=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block" id="avatar">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" lay-skin="switch" lay-filter="switchAdd" lay-text="可用|不可用" checked="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">创建人</label>
                <div class="layui-input-block">
                    <input type="text" name="createBy" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">修改人</label>
                <div class="layui-input-block">
                    <input type="text" name="updateBy" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSaveUser">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%--添加的弹框from--%>
        <form class="layui-form" action="" id="saveAddUserForm" lay-filter="saveAddUserFormFilter" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-block">
                    <select name="deptId" lay-verify="" id="xialaadd">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录名称</label>
                <div class="layui-input-block">
                    <input type="text" name="loginName" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" required lay-verify="required" placeholder="用户名" value=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" lay-reqtext="" placeholder="密码" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="可用|不可用" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">创建人</label>
                <div class="layui-input-block">
                    <input type="text" name="createBy" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSaveUser">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </body>
    <script>
        layui.use(['table', 'form', 'jquery'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;

            table.render({
                elem: '#demo'
                ,id: 'demo'
                , height: 500
                , url: '${pageContext.request.contextPath}/userinfo/select.do'
                //数据接口
                , page: true
                , toolbar: '#toolbarDemo'
                , limits: [1, 5, 10, 15, 20, 25, 30]
                , autoSort: false
                //开启分页
                , cols: [[
                    //表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'userId', title: '用户编号', width: 110, sort: true, fixed: 'left'}
                    ,{field: 'dept', title: '部门名称', width: 100,
                        templet: function (hhh) {
                            return hhh.dept.deptName
                        }
                    }
                    , {field: 'loginName', title: '登录名称', width: 100}
                    , {field: 'userName', title: '用户姓名', width: 100}
                    , {field: 'email', title: '邮箱', width: 130}
                    , {field: 'phone', title: '电话', width: 130}
                    , {field: 'sex', title: '性别', width: 60}
                    , {field: 'avatar', title: '头像', width: 60, height : 180,
                        templet: function (d) {
                            //得到当前行数据，并拼接成自定义模板
                            return '<img width="30px" height="30px" src="' + d.avatar + '" alt=""> '
                        }
                    }
                    , {field: 'password', title: '密码', width: 100}
                    , {field: 'salt', title: '盐值', width: 100}
                    , {field: 'status', title: '状态', width: 50}
                    , {field: 'delFlag', title: '删除标记', width: 90}
                    , {field: 'createBy', title: '创建人', width: 100}
                    , {field: 'createTime', title: '创建时间', width: 110}
                    , {field: 'updateBy', title: '修改人', width: 100}
                    , {field: 'updateTime', title: '修改时间', width: 110}
                    , {field: 'remark', title: '备注', width: 180}
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });

            //触发排序事件
            table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值 "
                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                table.reload('demo', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field //排序字段
                        , order: obj.type //排序方式
                    }
                });
            });

            //模糊查询
            //把查询按钮进行事件绑定
            form.on('submit(formDemo)', function (data) {
                table.reload('demo', {
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        userId: data.field.userId //第一个查询条件
                        , userName: data.field.userName
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
            //重置按钮进行事件绑定
            $("#search_reset").click(function () {
                table.reload('demo', {
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        userId: "" //第一个查询条件
                        , userName: ""
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                //form表单的内容回显
                form.val('savepassFormFilter', {
                    "userId": data.userId
                });
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            title: '添加用户',
                            type: 1,
                            content: $('#saveAddUserForm'),
                            area: ['500px', '400px']
                        });

                        //填充部门下拉框deptidSelect
                        $.ajax({
                            url: "${pageContext.request.contextPath}/dept/selectAllDept.do",
                            type: "POST",
                            dataType: "JSON",
                            success: function (ret) {
                                $("#xialaadd").empty();
                                $.each(ret.data, function (index, val) {
                                    $("#xialaadd").append("<option value='" + val.deptId + "'>" + val.deptName + "</option>")
                                });
                                layui.form.render("select");
                            }
                        });


                        //监听addUserForm表单的提交事件toolbarDemo
                        form.on('submit(formSaveUser)', function (data) {
                            $.ajax({
                                url: '${pageContext.request.contextPath}/userinfo/add.do'
                                , data: data.field
                                , dataType: "json"
                                , type: "post"
                                , success: function (redata) {
                                    if (redata.code == 0) {
                                        layer.closeAll();//关闭对话框
                                        table.reload('demo', {
                                            page: {
                                                curr: 1
                                            }
                                        });
                                    } else {
                                        layer.msg(redata.msg);
                                    }
                                }
                            });
                            return false;
                        });
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            var ids = [];            //循环所有选中的行
                            for (let i = 0; i < data.length; i++) {
                                ids[i] = data[i].userId;
                            }
                            console.log(ids)
                            layer.confirm('真的删除行么', function (index) {
                                //删除数据库中
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/userinfo/delete.do",
                                    type: "POST",
                                    dataType: "JSON",
                                    data: {userId: ids.join(",")},
                                    success: function (data) {
                                        if (data.code == 0) {
                                            //关闭对话框
                                            layer.closeAll(); //疯狂模式，关闭所有层
                                            //刷新表格数据
                                            table.reload('demo');
                                        }
                                    }
                                });
                            })
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是
                var data = obj.data //获得当前行数据
                //console.log(data);
                var layEvent = obj.event; //获得 lay-event 对应的值
                // 回显状态开关
                if (data.status == 1) {
                    $("#saveUserForm input[type=checkbox]").prop("checked", "");
                } else {
                    $("#saveUserForm input[type=checkbox]").prop("checked", "checked");
                }

                // 重置密码
                if (layEvent === 'detail') {
                    layer.open({
                        title: '修改密码',
                        type: 1,
                        content: $('#savepassForm'),
                        area: ['500px', '300px']
                    });

                    //form表单的内容回显
                    form.val('savepassFormFilter', {
                        "userId": data.userId
                        , "password": data.password
                    });

                    //监听表单的修改事件
                    form.on('submit(formSaveUser)', function (data) {
                        $.ajax({
                            url: '${pageContext.request.contextPath}/userinfo/password.do'
                            , data: data.field
                            , dataType: "json"
                            , type: "post"
                            , success: function (redata) {
                                if (redata.code == 0) {
                                    layer.closeAll();//关闭对话框
                                    window.location.href = "${pageContext.request.contextPath}/page/loginUser.jsp";
                                    table.reload('demo', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                } else {
                                    layer.msg(redata.msg);
                                }
                            }
                        });
                        return false;
                    })
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        //删除数据库中
                        $.ajax({
                            url: "${pageContext.request.contextPath}/userinfo/delete.do",
                            type: "POST",
                            dataType: "JSON",
                            data: {userId: data.userId},
                            success: function (data) {
                                if (data.code == 0) {
                                    //关闭对话框
                                    layer.closeAll(); //疯狂模式，关闭所有层
                                    //刷新表格数据
                                    table.reload('demo');
                                }
                                layer.msg(data.msg);
                            }
                        });
                    });
                } else if (layEvent === 'update') {
                    layer.open({
                        title: '修改用户',
                        type: 1,
                        content: $('#saveUserForm'),
                        area: ['500px', '400px']
                    });
                    //form表单的内容回显
                    form.val('saveUserFormFilter', {
                        "userId": data.userId
                        , "dept": data.dept.deptName
                        , "loginName": data.loginName
                        , "userName": data.userName
                        , "email": data.email
                        , "phone": data.phone
                        , "sex": data.sex
                        , "avatar": data.avatar
                        , "password": data.password
                        , "salt": data.salt
                        , "delFlag": data.delFlag
                        , "createBy": data.createBy
                        , "create_time": data.create_time
                        , "updateBy": data.updateBy
                        , "update_time": data.update_time
                        , "remark": data.remark
                    });
                    // 回显状态开关
                    if (data.status.valueOf() == 1) {
                        $("#saveUserForm input[type=checkbox]").prop("checked", "");
                    } else {
                        $("#saveUserForm input[type=checkbox]").prop("checked", "checked");
                    }
                    console.log(data.avatar.valueOf())
                    //头像的清空
                    $("#avatar").empty();
                    //头像的回显
                    $("#avatar").append("<img width='30px' height='30px' src='" + data.avatar.valueOf() + "'>")
                    //部门下拉框
                    $.ajax({
                        url: "${pageContext.request.contextPath}/dept/selectAllDept.do",
                        type: "POST",
                        dataType: "JSON",
                        success: function (ret) {
                            $("#xiala").empty();
                            $.each(ret.data, function (index, val) {
                                if (val.deptName == data.dept.deptName) {
                                    $("#xiala").append("<option selected value='" + val.deptId + "'>" + val.deptName + "</option>")
                                } else {
                                    $("#xiala").append("<option value='" + val.deptId + "'>" + val.deptName + "</option>")
                                }
                            });
                            layui.form.render("select");
                        }
                    });
                    //监听表单的修改事件
                    form.on('submit(formSaveUser)', function (data) {
                        $.ajax({
                            url: '${pageContext.request.contextPath}/userinfo/update.do'
                            , data: data.field
                            , dataType: "json"
                            , type: "post"
                            , success: function (redata) {
                                if (redata.code == 0) {
                                    layer.closeAll();//关闭对话框
                                    table.reload('demo', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                } else {
                                    layer.msg(redata.msg);
                                }

                            }
                        });
                        return false;
                    });
                }
            });
        });
    </script>
</html>
